<template>
    <div class="update_password">
        <div class="title">
            <span>修改密码</span>
        </div>
        <div class="form_warp">
            <el-form ref="upDatePwdForm" :rules="rules" :model="upDatePwdForm" label-width="90px"
                @submit.native.prevent>
                <el-form-item prop="currentPassword" label="当前密码：" style="text-align: left;">
                    <el-input v-model="upDatePwdForm.currentPassword" :show-password="true" type="password"
                        placeholder="请输入旧密码" style="width: 600px" minlength="6"
                        @input="upDatePwdForm.currentPassword=upDatePwdForm.currentPassword.replace(/\s+/g,'')">

                    </el-input>
                </el-form-item>
                <el-form-item prop="newPassword" label="新密码：" style="text-align: left; margin-bottom: 8px;">
                    <el-input v-model="upDatePwdForm.newPassword" placeholder="请输入新密码" :show-password="true"
                        type="password" style="width: 600px" minlength="6"
                        @input="upDatePwdForm.newPassword=upDatePwdForm.newPassword.replace(/\s+/g,'')">
                    </el-input>
                </el-form-item>
                <el-form-item label="密码强度：" style="text-align: left; margin-bottom: 8px;">
                    <div class="strength">
                        <span :class="pwdIntensity>=1?'weak':''">弱</span>
                        <span :class="pwdIntensity>=2?'moderate':''">中</span>
                        <span :class="pwdIntensity>=3?'strong':''">强</span>
                    </div>
                </el-form-item>
                <el-form-item prop="confirmPassword" label="确认密码：" style="text-align: left;">
                    <el-input v-model="upDatePwdForm.confirmPassword" placeholder="请确认新密码" :show-password="true"
                        type="password" style="width: 600px" minlength="6"
                        @input="upDatePwdForm.confirmPassword=upDatePwdForm.confirmPassword.replace(/\s+/g,'')">
                    </el-input>
                </el-form-item>
                <el-form-item style="text-align: left;">
                    <el-button native-type="submit" type="primary" size="medium" @click="submitForm">保 存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import { encrypt } from '@u/utils'
    export default {
        data() {
            let oldPwd = (rule, value, callback) => {
                if (value === '') {
                    return callback(new Error('请输入当前密码'));
                } else if (value.length < 6) {
                    callback(new Error('长度不能小于6位'));
                } else {
                    callback()
                }

            };
            let newPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else if (value.length < 6) {
                    callback(new Error('长度不能小于6位'));
                }else if (value.length > 25) {
                    callback(new Error('长度不能大于25位'));
                }else {
                    if (this.upDatePwdForm.confirmPassword !== '') {
                        this.$refs.upDatePwdForm.validateField('confirmPassword');
                    }
                    callback();
                }
            };
            let checkPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请确认新密码'));
                } else if (value !== this.upDatePwdForm.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else if (value.length < 6) {
                    callback(new Error('长度不能小于6位'));
                } else {
                    callback();
                }
            };
            return {
                pwdIntensity: 0, // 密码强度 0 未输入, 1 弱, 2 中, 3 强
                upDatePwdForm: {
                    currentPassword: '', // 当前密码
                    newPassword: '', // 新密码
                    confirmPassword: '' // 确认密码
                },
                rules: {
                    currentPassword: [{
                        validator: oldPwd,
                        trigger: 'blur'
                    }],
                    newPassword: [{
                        validator: newPwd,
                        trigger: 'blur'
                    },
                    ],
                    confirmPassword: [{
                        validator: checkPwd,
                        trigger: 'blur'
                    }]
                }
            }
        },
        methods: {
            οnkeyup(params){
                alert(params)
            },
            submitForm() {
                this.$refs.upDatePwdForm.validate((valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: '保存中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.2)'
                        });
                        this.$store.dispatch('personalModule/updatePassword',{
                            newPassword: this.$md5(this.upDatePwdForm.confirmPassword),
                            oldPassword: this.$md5(this.upDatePwdForm.currentPassword)
                        }).then(res => {
                            if (res.data.code === 200) {
                                this.$message({
                                    message: '密码修改成功',
                                    type: 'success'
                                });
                                // 清空
                                this.upDatePwdForm = {
                                    currentPassword: '', // 当前密码
                                    newPassword: '', // 新密码
                                    confirmPassword: '' // 确认密码
                                }
                            } else {
                                this.$message({
                                    message: res.data.msg,
                                    type: 'warning'
                                });
                            }
                            loading.close()
                        }).catch(err => {
                            this.$message.error('服务器内部错误');
                            loading.close()
                        })
                    } else {
                        return false;
                    }
                });
            },
            // 判断密码强度
            checkStrong(sValue) {
                var modes = 0;
                //正则表达式验证符合要求的
                if (sValue.length < 1) return modes;
                if (/\d/.test(sValue)) modes++; //数字
                if (/[a-z]/.test(sValue)) modes++; //小写
                if (/[A-Z]/.test(sValue)) modes++; //大写
                if (/\W/.test(sValue)) modes++; //特殊字符

                //逻辑处理
                switch (modes) {
                    case 1:
                        return 1;
                        break;
                    case 2:
                        return 2;
                        break;
                    case 3:
                    case 4:
                        return sValue.length < 4 ? 3 : 4;
                        break;
                }
                return modes;
            }
        },
        watch: {
            "upDatePwdForm.newPassword": function (n, o) {
                this.pwdIntensity = this.checkStrong(n);

            }
        }
    }
</script>

<style lang="scss" scoped>
    .update_password {
        width: 100%;

        .title {
            text-align: left;
            border-bottom: 1px solid #DCDFE6;
            box-sizing: border-box;
            padding-bottom: 10px;
        }

        .form_warp {
            box-sizing: border-box;
            padding-top: 10px;
        }

        .strength {
            box-sizing: border-box;
            overflow-y: hidden;
            padding-top: 15px;
        }

        .strength>span {
            display: inline-block;
            width: 85px;
            height: 10px;
            font-size: 12px;
            text-align: center;
            background-color: #eee;
        }

        .strength>span:nth-child(2) {
            margin: 0 10px;
        }

        .strength>span.weak {
            color: red;
            background-color: red;
        }

        .strength>span.moderate {
            color: orange;
            background-color: orange;
        }

        .strength>span.strong {
            color: #00D1B2;
            background-color: #00D1B2;
        }
    }
</style>